﻿@{
    ViewBag.Title = "Edit Content";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}

@model DirigoEdge.Areas.Admin.Models.ViewModels.EditContentViewModel
@using DirigoEdge.Utils

<div class="editContent" data-id="@Model.BasePageId">
    
    @Html.Partial("Partials/BlogEditHeaderPartial")

    <div class="row visibleOverflow" id="ContentRowContainer">
        <div id="ContentRow" class="nine columns">
            
            @{
                string permaLinkModded = !String.IsNullOrEmpty(Model.ThePage.Permalink) ? "True" : "False";
            }

            <div class="contentTitle">
                <input id="PageTitle" class="required" type="text" value="@Model.ThePage.Title" autocomplete=off />
                <span class="permHint">Permalink: </span>
                <span id="SiteUrl">@Model.SiteUrl</span><span id="PermaLinkEnd" data-modified="@permaLinkModded">@ContentUtils.GetFormattedUrl(Model.ThePage.Permalink)</span>
                <input id="PermaLinkEditPane" type="text" class="hide autogrow" autocomplete="off" /><span>/</span>
                <a id="EditPermaLink" href="javascript:void(0);">edit</a>
                <a id="ViewPermaLink" href="@Model.SiteUrl@Model.ThePage.Permalink" target="_blank">view live page</a>
            </div>
            
            @{
                // If no schema is assigned, show the html tab by default
                bool hasSchema = Model.ThePage.SchemaId != null && Model.ThePage.SchemaId > 0;
                string fieldEditorActive = (hasSchema && Model.ShowFieldEditor) ? "active" : "";
                string htmlEditorActive = (!hasSchema || !Model.ShowFieldEditor) ? "active" : "";
                string hideFieldEditorClass = !Model.ShowFieldEditor ? "hide" : "";
            }

            <dl class="tabs contained">
                <dd class="@fieldEditorActive @hideFieldEditorClass"><a href="#Editor">Fields</a></dd>
                <dd class="@htmlEditorActive"><a href="#Html">HTML</a></dd>
                <dd><a href="#CSS">CSS</a></dd>
                <dd><a href="#JS">Javascript</a></dd>
            </dl>

            <a id="InsertContentImage" href="#" class="button secondary small"><i class="fa fa-picture-o"></i>&nbsp; Insert Image</a>

            <ul class="tabs-content contained">
                
                @*Schema Editor*@
                <li class="relative editTabArea @fieldEditorActive" id="EditorTab" data-schemaid="@Model.ThePage.SchemaId">
                    @{
                        if (Model.ThePage.SchemaId == null || Model.ThePage.SchemaId < 1)
                        {
                            <p>No Schema assigned.</p>
                        }
                    }
                </li>

                @*HTML*@
                <li class="relative editTabArea @htmlEditorActive" id="HtmlTab">
                    <div class="aceEditArea" id="HTMLContent">@Model.ThePage.HTMLUnparsed</div>
                    
                    <div class="tipContainer">Tip: Insert values from the Fields tab via <a href="https://github.com/janl/mustache.js" target="_blank">mustache.js</a>. Example: {{Field Label}} or {{{Field Label}}} for raw/unescaped html.</div>
                </li>

                @*CSS*@
                <li class="relative editTabArea" id="CSSTab">
                    <div class="aceEditArea" id="CSSContent">@Model.ThePage.CSSContent</div>

                </li>

                @*Javascript*@
                <li class="relative editTabArea" id="JSTab">
                    <div class="aceEditArea" id="JSContent">@Model.ThePage.JSContent</div>
                </li>
            </ul>
            
            <div class="twelve columns">
                <div class="textEditorControls">
                    <form class="custom">
                        @{
                            string Checked = Model.UseWordWrap ? "checked=checked" : "";
                        }
                        <label for="WordWrap"><input type="checkbox" id="WordWrap" style="display: none;" @Checked><span class="custom checkbox"></span> WordWrap</label>    
                    </form>
                </div>
            </div>

        </div>

        <div class="three columns">
            @Html.Partial("~/Areas/Admin/Views/Shared/EditContentSettingsPartial.cshtml")
        </div>

    </div>    

</div>

@section scripts {
    <script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="/Scripts/jquery/plugins/dropzone/dropzone.js"></script>
    <link href="/Scripts/jquery/plugins/dropzone/css/dropzone.css" type="text/css" rel="stylesheet">
    <link href="/Scripts/jquery/plugins/dropzone/css/basic.css" type="text/css" rel="stylesheet">
    
    @*CKEditor and Mustache required for Schema Editor*@
    <script src="/scripts/ckeditor/ckeditor.js"></script>
    <script src="/Areas/Admin/Scripts/mustache/mustache.js"></script>
    <script src="/Areas/Admin/Scripts/fieldEditor.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            // AutoGrow Input
            $("input.autogrow").autoGrowInput();
        });
    </script>
}

@section Modals {

    <div id="FileBrowserModal" class="reveal-modal large">
        @* Content is loaded via Ajax in CKEditor insertimage plugin *@
    </div>

    @Html.Partial("Partials/RevisionDetailPartial")

    <div id="SEOMetaModal" class="reveal-modal medium">
        <h2>SEO / Meta</h2>
        <p class="lead">Set your content's meta information</p>

        <label class="has-tip tip-top" title="Commonly used by search engines to display preview snippets for a given page.">Meta Description</label>
        <input id="MetaDescription" type="text" placeholder="" autocomplete=off value="@Model.ThePage.MetaDescription">

        <label class="has-tip tip-top" title="Open Graph : The title of your object as it should appear within the graph, e.g., 'The Rock'.">OG Title</label>
        <input id="OGTitle" type="text" placeholder="" autocomplete=off value="@Model.ThePage.OGTitle">

        <label class="has-tip tip-top" title="Open Graph : An image URL which should represent your object within the graph.">OGImage</label>
        <input id="OGImage" type="text" placeholder="" autocomplete=off value="@Model.ThePage.OGImage">

        <label class="has-tip tip-top" title="Open Graph : The type of your object, e.g., 'video.movie'. Depending on the type you specify, other properties may also be required.">OGType</label>
        <input id="OGType" type="text" placeholder="" autocomplete=off value="@Model.ThePage.OGType">

        <label class="has-tip tip-top" title="Open Graph : The canonical URL of your object that will be used as its permanent ID in the graph, e.g., 'http://www.imdb.com/title/tt0117500/'">OGUrl</label>
        <input id="OGUrl" type="text" placeholder="" autocomplete=off value="@Model.ThePage.OGUrl">

        <label class="has-tip tip-top" title="The one authoritatively correct URL for a resource.">Canonical</label>
        <input id="Canonical" type="text" placeholder="" autocomplete=off value="@Model.ThePage.Canonical">

        <a class="right button" onclick=" $('#SEOMetaModal').trigger('reveal:close');">Close</a>
        <p class="right saveTip" style="">(Changes will be saved when you save your blog)</p>

        <a class="close-reveal-modal">&#215;</a>
    </div>
}